<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href = "<?php echo base_url(); ?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $product['name']; ?></title>

<?php
	include 'public/views/header.php';
	include 'public/home/html/banner.php';
	include 'public/home/html/banner2.php';
	include 'public/home/html/lazy_load.php';
	include 'public/home/html/alert.php';
	// include 'public/home/html/lazy_load.php';
	// include 'public/home/html/bootstrap.php';
?>
<script src="public/home/js/product.js"></script>
<script src="public/home/js/function.js"></script>
<link rel="stylesheet" type="text/css" href="public/append/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 微信jssdk -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<style>
	*{
		padding:0px;
		margin:0px;
	}
	body{
		overflow-x: hidden;
		max-width:400px;
		margin:auto;
		background-color: white;
	}
	a{
		text-decoration:none;
		color:#fff; 
	}

	/*顶部，标题*/
	.head{
		width: 100%;
		height: 60px;
		background: #f2f2f2;
	}
	.head .col-xs-3,.head .col-xs-6{
		height:60px;
	}
	.head .col-xs-6{
		text-align: center;
	}
	.head .col-xs-3 img{
		height: 26px;
		width: 30px;
		margin-top: 17px;
	}
	.head .col-xs-6 img{
		height: 50px;
		width: auto;
		 margin-top: 5px;
	}
	.title{
		width:88%;
		margin-left:6%;
		margin-top: 20px;
	}
	.title-font{
		color: #a53942;
		font-weight:bold;
		font-size:16px;
	}
	.title-line{
		height: 3px;width:18px;background: #a53942;
	}


	.rich-text{
		width:96%;
		margin-left:2%;
		overflow-x: hidden;
		height:auto;
		background-color: white;
	}

	.pdf{
		width:96%;
		margin-left: 2%;
		padding-bottom:20px;
	}
	.pdf-item{
		width:36%;
		margin-top:20px;
		margin-right: 0px;
		display: inline-block;
		height:210px;
		border-radius: 2px;
		box-shadow: 0px 0px 12px #999;
		overflow: hidden;
	}
	.pdf-item:nth-child(odd){
		margin-left:10.5%;
		margin-right: 3.5%;
	}
	.pdf-item:nth-child(even){
		margin-right:10%;
		margin-left: 2.5%;
	}

	.pdf-img{
		width:100%;
		height:160px;
	}
	.pdf-name{
		height:25px;
		line-height: 30px;
		text-align: center;
		font-size:12px;
		color:#848484;
		letter-spacing:1px;
	}
	.pdf-size{
		height:25px;
		line-height: 20px;
		text-align: center;
		font-size:12px;
		color:#848484;
	}
	.pdf-size img{
		height:15px;
		width:15px;
		position: relative;
		left:-5px;
		top:3px;
	}

	/*基础信息*/
	.base-info{
		height:auto;
		width:88%;
		margin-left: 6%;
		/*line-height: 35px;*/
		margin-top:10px;
		margin-bottom:20px;
		text-align: center;
	}
	.base-info p{
		display: block;
		/*height:35px;*/
		height:auto;
		width:100%;
		word-wrap: break-word;word-break: break-all;overflow: hidden;
	}
	.base-info p:nth-child(1){
		font-weight:bold;
		color:#333;
		font-size:24px;
		/*line-height: 35px;*/
		padding:3px 0px;
	}
	.base-info p:nth-child(2){
		color:#333;
		font-size:16px;
		padding:5px 0px;
		
	}
	.base-info p:nth-child(3){
		color:#878787;
		font-size:12px;
		padding:1px 0px;
	}
	

	/*详细信息*/
	.info-title{
		height:40px;
		line-height: 40px;
		width:88%;
		margin-left:6%;
		/*background-color: red;*/
		border-top:1px solid #F3F3F3;
		color:#3F3E3D;
		font-size: 12px;
	}
	.info-title img{
		height:16px;
		width:16px;
		float: right;
		margin-top: 12px;
		cursor: pointer;
	}
	.info-title img:nth-child(2){
		display: none;
	}
	.info-item{
		padding:20px 6%;
		color:#858789;
		font-size: 12px;
		padding-top:0px;
		display: none;
	}
	.color-item{
		width:32%;
		/*height:70px;*/
		/*display: inline-block;*/
		float: left;
		/*background-color: red;*/
		word-wrap: break-word;word-break: break-all;overflow: hidden;
	}
	.color-img{
		width:60%;
		margin-left: 20%;
		height:30px;
		margin-top:10px;
		border:1px solid #999;
	}
	.color-name{
		/*height:20px;*/
		word-wrap: break-word
		height:auto;
		width:100%;
		line-height: 18px;
		text-align: center;
		margin-top: 8px;
	}
	.design-img{
		width:100%;
		height:auto;
	}

	/*底部按钮*/
	.foot{
		height:70px;
		line-height: 70px;
		width:100%;
		border:1px solid #898989;
		position: fixed;
		bottom:0px;
		box-shadow: 0px -3px 3px #999;
		/*background-color: white;*/
		background-color: #BE7D75;
	}
	.foot-button{
		width: 33%;
		height:70px;
		text-align: center;
		display: inline-block;
		border-right:1px solid #868686;
		background-color: white;
		float: left;
	}
	.foot-button:last-child{
		background-color: #BE7D75;
		color:white;
		width:33%;
		border-right:none!important;
		float: right!important;
	}
	.foot-button img{
		height:30px;
		width:30px;
		margin-top:10px;
	}
	.foot-button i{
		font-size:20px;
		margin-top:17px;
	}
	.foot-button div{
		height:height:20px;
		line-height: 20px;
		font-size: 10px;
	}


	/*分享*/
	.share-zhezhao{
	    background:rgba(0,0,0,0.6);
	    position: fixed;
	    z-index:999;
	    display: none;
	    top:0px;
	    left:0px;
	}
	.share-arrow{
	    height:150px;
	    width:150px;
	    position: fixed;
	    top:10px;
	    right:10px;
	    z-index: 1000;
	    display: none;
	}
	.share-arrow i{
	    font-size: 80px;
	    color:white;
	    float: right;
	}
	.share-arrow p{
	    font-size: 14px;
	    color:white;
	    float: right;
	    margin-top: 10px;
	}

	/*pdf*/
	.pdf{
		width:96%;
		margin-left: 2%;
		padding-bottom:40px;
		margin-top: 20px;
	}
	.pdf-item{
		width:42%;
		margin-top:20px;
		margin-right: 0px;
		display: inline-block;
		height:210px;
		border-radius: 2px;
		box-shadow: 0px 0px 12px #999;
		overflow: hidden;
	}
	.pdf-item:nth-child(odd){
		margin-left:5%;
		margin-right: 2%;
	}
	.pdf-item:nth-child(even){
		margin-right:5%;
		margin-left: 2%;
	}

	.pdf-img{
		width:100%;
		height:160px;
	}
	.pdf-name{
		height:25px;
		line-height: 30px;
		text-align: center;
		font-size:12px;
		color:#848484;
		letter-spacing:1px;
	}
	.pdf-size{
		height:25px;
		line-height: 20px;
		text-align: center;
		font-size:12px;
		color:#848484;
	}
	.pdf-size img{
		height:15px;
		width:15px;
		position: relative;
		left:-5px;
		top:3px;
	}


	/*banner css重写*/
	.v-slideshow-dot{
		bottom:10px;
	}
	.v-slideshow-dot i{
		width:6px;
		height:6px;
		border-radius: 3px;
		margin:0px 3px;
		/*-moz-box-shadow:0px 0px 3px #aaa;
		-webkit-box-shadow:0px 0px 3px #aaa; 
		box-shadow:0px 0px 3px #aaa;*/
		border:1px solid #ccc;
	}
	.v-slideshow-arrow{
		display: none;
	}
	.v-slideshow-box img {
	    height:100%;
	    width:auto;
	    left: 0;
	    right: 0;
	    margin-left: auto;
	    margin-right: auto;
	}

</style>
</head>

<body>
	<input type="hidden" id="park_id" value="<?php echo $park_id ?>"/>
	<input type="hidden" id="openid" value="<?php echo $openid ?>"/>
	<input type="hidden" id="product_id" value="<?php echo $product['id'] ?>"/>
	<input type="hidden" id="share-img" value="<?php echo isset($product['img'][0])?$product['img'][0]:'' ?>"/>
	<div class="head">
		<div class="col-xs-3"><img class="no-show-img no-click-img show-index" src="<?php echo base_url().'/public/home/images/pic/'?>detail.png" alt=""></div>
		<div class="col-xs-6"><img class="no-show-img no-click-img" src="<?php echo $_SESSION[SESS_CONFIG][DicKey::Logo[XPHEnum::Value]]['dic_value'] ?>" alt=""></div>
		<div class="col-xs-3"></div>
	</div>
	<!-- 轮播图 -->
	<?php if (isset($product['img'])&&count($product['img'])>0): ?>
	<!-- 20191006新需求，不再使用原banner样式 -->
    <!-- <div class="banner">
        <div class="large_box">
            <ul>
            	<?php foreach ($product['img'] as $k => $v): ?>
                <li>
                    <img src="<?php echo $v ?>">
				</li>
                <?php endforeach ?>
            </ul>
        </div>
        <div class="small_box">
            <span class="btn left_btn"></span>
            <div class="small_list">
                <ul>
                	<?php foreach ($product['img'] as $k => $v): ?>
                    <li <?php echo $k==0?'class="on"':'' ?>>
                        <img class="no-show-img no-click-img" src="<?php echo $v ?>">
                        <div class="bun_bg"></div>
                    </li>
                    <?php endforeach ?>
                </ul>
            </div>
            <span class="btn right_btn"></span>
        </div>
    </div> -->
    <div id="banner2" style="width:100%; height:170px;">
	    <vue-slideshow :data="images" :config="config"></vue-slideshow>
	</div>
    <div style="clear: both;"></div>		
	<?php endif ?>
	
	
	<!-- 基础信息 -->
	<div class="base-info">
		<p class="product-code"><?php echo $product['code'] ?></p>
		<p class="product-name"><?php echo $product['name'] ?></p>
		<p class="product-series"><?php echo $product['series'] ?> 系列</p>
		<p class="product-type hide"><?php echo $product['type'] ?></p>
	</div>
	
	<!-- 内容开始 -->
	<div class="info-title">
		<span>尺寸</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon no-show-img no-click-img"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon no-show-img no-click-img"/>
		</span>
	</div>
	<div class="info-item">
		长：<?php echo $product['long'] ?>mm 宽：<?php echo $product['wide'] ?>mm 高：<?php echo $product['high'] ?>mm
	</div>

	<div class="info-title">
		<span>颜色</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon no-show-img no-click-img"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon no-show-img no-click-img"/>
		</span>
	</div>
	<div class="info-item">
		<?php if (count($product['color_img'])>0): ?>
		<?php $color_index=0; ?>
		<?php foreach ($product['color_img'] as $k => $v): ?>
		<?php if ($color_index%3==0): ?>
		<div style="float: left; width:100%;">	
		<?php endif ?>
		<div class="color-item">
			<img src="<?php echo isset($v[0])?$v[0]:'' ?>" alt="颜色" class="color-img"/>
			<div class="color-name"><?php echo $k ?></div>
		</div>	
		<?php if ($color_index%3==2||($color_index%3!=2&&$color_index+1==count($product['color_img']))): ?>
		</div>	
		<?php endif ?>
		<?php $color_index++; ?>
		<?php endforeach ?>	
		<div style="clear: both;"></div>
		<?php else: ?>
			暂无数据
		<?php endif; ?>
	</div>

	<div class="info-title">
		<span>图纸</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon no-show-img no-click-img"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon no-show-img no-click-img"/>
		</span>
	</div>
	<div class="info-item">
		<?php if (count($product['design_img'])>0): ?>
		<?php foreach ($product['design_img'] as $k => $v): ?>
		<img src="<?php echo $v ?>" alt="设计图" class="design-img"/>	
		<?php endforeach ?>	
		<?php else: ?>
		暂无数据
		<?php endif; ?>
	</div>

	<div class="info-title">
		<span>可选规格</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon no-show-img no-click-img"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon no-show-img no-click-img"/>
		</span>
	</div>
	<div class="info-item">
		<?php echo $product['specifications'] ?>
	</div>

	<div class="info-title">
		<span>在线预览</span>
		<span>
			<img src="public/home/images/add.png" alt="" class="show-icon no-show-img no-click-img"/>
			<img src="public/home/images/minus.png" alt="" class="hide-icon no-show-img no-click-img"/>
		</span>
	</div>
	<div class="info-item pdf">
		<?php if (isset($product['pdf_item'])&&count($product['pdf_item'])>0): ?>
		<?php foreach ($product['pdf_item'] as $k => $v): ?>
		<div class="pdf-item">
			<a href="<?php echo $v['link'] ?>">
				<img src="<?php echo $v['path'] ?>" data-src="<?php echo $v['path'] ?>" alt="" class="pdf-img no-click-img"/>
				<div class="pdf-name"><?php echo sub_str($v['name'],10) ?></div>
				<div class="pdf-size"><img src="public/home/images/watch.png" alt="" class="pdf-img no-show-img no-click-img"/><?php echo sub_str($v['size'],8) ?></div>
			</a>
		</div>			
		<?php endforeach ?>
		<?php else: ?>
		暂无数据
		<?php endif; ?>
	</div>
	
	<div style="height:80px; width:100%;"></div>
	<!-- 底部按钮 -->
	<div class="foot">
		<div class="foot-button share-button">
			<!-- <img src="public/home/images/share.png" alt="" /> -->
			<i class="fa fa-external-link" aria-hidden="true"></i>
			<div>分享</div>
		</div>
		<div class="foot-button collect-button">
			<!-- <img src="public/home/images/like.png" alt="" /> -->
			<?php if ($is_collect): ?>
			<i class="fa fa-heart" aria-hidden="true"></i>
			<div>取消收藏</div>
			<?php else: ?>	
			<i class="fa fa-heart-o" aria-hidden="true"></i>
			<div>收藏</div>
			<?php endif; ?>
			
		</div>
		<a href="<?php echo base_url() ?>Home/Shop/shopList?park_id=<?php echo $park_id ?>">
		<div class="foot-button">
			<!-- <img src="public/home/images/to-shop.png" alt="" /> -->
			<i class="fa fa-map-marker" aria-hidden="true"></i>
			<div>查看门店</div>
		</div>
		</a>
	</div>

	<div class="share-zhezhao"></div>
    <div class="share-arrow">
        <i class="fa fa-hand-o-up" aria-hidden="true"></i>
        <p>点击菜单选择分享</p>
    </div>


    <!-- index iframe -->
    <div class="zhezhao" style="position:fixed; z-index:999; background: rgba(0,0,0,0.5); display: none; top:0px; left:0px;"></div>
    <iframe class="index-iframe" src="<?php echo base_url() ?>Home/Index/Index?park_id=<?php echo $_GET['park_id'] ?>" frameborder="0" style="position: fixed; z-index:1000; top:0px;"></iframe>
</body>
<script>
	<?php 
		$images=array();
		foreach ($product['img'] as $k => $v) {
			$images[]=array('src'=>$v,'href'=>'javascript:void(0)');
		}
	?>
	<?php if (count($product['img'])>0): ?>
	new Vue({
        el: "#banner2",
        data: {
            images:<?php echo json_encode($images) ?>,
            config: {
                effect: "slide",
                arrow: true,
                autoplay: 3000
            }
        }
    });
    <?php endif; ?>
    $(function(){
    	var startX=0;
    	var startY=0;
    	var moveEndX=0;
    	var moveEndY=0;
    	var X=0;
    	var Y=0;
    	$("#banner2").on("touchstart", function(e) {
    	    // 判断默认行为是否可以被禁用
    	    if (e.cancelable) {
    	        // 判断默认行为是否已经被禁用
    	        if (!e.defaultPrevented) {
    	            e.preventDefault();
    	        }
    	    }   
    	    startX = e.originalEvent.changedTouches[0].pageX,
    	    startY = e.originalEvent.changedTouches[0].pageY;
    	});
    	$("#banner2").on("touchend", function(e) {         
    	    // 判断默认行为是否可以被禁用
    	    if (e.cancelable) {
    	        // 判断默认行为是否已经被禁用
    	        if (!e.defaultPrevented) {
    	            e.preventDefault();
    	        }
    	    }               
    	    moveEndX = e.originalEvent.changedTouches[0].pageX,
    	    moveEndY = e.originalEvent.changedTouches[0].pageY,
    	    X = moveEndX - startX,
    	    Y = moveEndY - startY;
    	    //左滑
    	    if ( X > 0 ) {
    	        $('.v-slideshow-arrow i').eq(0).click();            
    	    }
    	    //右滑
    	    else if ( X < 0 ) {
    	        $('.v-slideshow-arrow i').eq(1).click(); 
    	    }
    	    //下滑
    	    else if ( Y > 0) {
    	        // alert('下滑');    
    	    }
    	    //上滑
    	    else if ( Y < 0 ) {
    	        // alert('上滑');    
    	    }
    	    //单击
    	    else{
    	        // alert('单击');    
    	    }
    	});

    	$('.index-iframe').css('left','-'+(Number($(window).width())*0.8)+'px').width(Number($(window).width())*0.8);
    	setWindow();
		$(window).resize(function(){
			setWindow();
		});
    	$('.show-index').click(function(){
    		$('.zhezhao').show();
    		$('.index-iframe').animate({left:'0px'});
    	});
    })

    function setWindow(){
    	$('.zhezhao').height($(window).height()).width($(window).width());
		$('.index-iframe').height($(window).height());
    }
</script>  
</html>